/* Estilos específicos para esta vista, idealmente deberían ir en un archivo CSS */
        .main-container {
            display: flex;
            flex-direction: column;
            /* Apila los elementos verticalmente */
            max-height: 100vh;
            /* El contenedor principal debe ocupar al menos el 100% del viewport height */
        }

        .content-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
        }

        h1.main-title {
            color: #7E2C2C;
            font-size: 23pt;
            text-align: center;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .inscription-card {
            background-color: #fff;
            border: 1px solid #C68C3E;
            border-radius: 20px;
            padding: 10px;
            text-align: center;
            width: 457px;
            height: 237px;
        }

        .inscription-card img.icon {
            width: 67px;
            height: 67px;
            margin-bottom: 5px;
        }

        .inscription-card h2 {
            font-size: 23pt;
            margin-bottom: 10px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: #7E2C2C;
            line-height: 1;

        }

        .inscription-card p {
            font-size: 20pt;
            color: #7E2C2C;
            margin: 1px;
            font-family: Gabriola;
            line-height: 1;

        }

        .inscription-card button {
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            background-color: #7E2C2C;
            /* Color vino tinto */
            color: white;
            border: none;
            padding: 2px 50px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 15pt;
            margin-top: 10px;
        }

        .inscription-card button.disabled {
            background-color: #b0b0b0;
            /* Gris */
            color: #666;
            /* Color del texto más tenue */
            cursor: not-allowed;
            /* Cambia el cursor para indicar que está deshabilitado */
            opacity: 0.7;
            /* Reduce la opacidad para dar un efecto visual */
        }


        .reminder-card {
            background-color: #fff;
            border: 1px solid #C68C3E;
            border-radius: 20px;
            padding: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 457px;
            height: 105px;
            padding-top: 15px;
        }

        .reminder-card h2 {
            font-family: Bahnschrift, 'Segoe UI', Arial, sans-serif;
            font-size: 16pt;
            color: #C68C3E;
            margin: 0 auto;
            /* Remover text-align: center; daqui, pois o flexbox vai controlar */
            display: flex;
            justify-content: space-between;
            /* Distribui o espaço entre os itens */
            align-items: baseline;
        }

        /* Centraliza o primeiro span (o texto "Recuerda que:") */
        .reminder-card h2 span:first-child {
            flex-grow: 1;
            /* Permite que este span cresça para centralizar */
            text-align: center;
            /* Centraliza o texto dentro dele */
        }

        /* O segundo span (o "5/30") já está alinhado à direita pelo space-between */
        .reminder-card h2 span:last-child {
            /* Não precisa de margin-left: auto; aqui com justify-content: space-between; */
            flex-shrink: 0;
            /* Impede que ele encolha */
            text-align: right;
            /* Garante que o texto esteja alinhado à direita dentro do span */
            color: #7E2C2C;
            margin-right: 25px;
        }

        .reminder-card p {
            font-family: 'Bradley Hand ITC', 'Bradley Hand', 'Brush S   cript MT', 'Comic Sans MS', cursive;
            font-size: 13pt;
            line-height: 1;
            color: #333;
            display: flex;
            align-items: flex-start;
            padding: 0;
            margin: 5px 0;
        }

        .reminder-card p::before {
            content: '•';
            color: #7E2C2C;
            /* Color vino tinto para el bullet */
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: 5px;
            margin-right: 5px;
        }

        .baja {
            margin-top: -70px;
            align-self: flex-start;
            display: flex;
        }

        .textoBaja {
            padding: 5px 10px;
            font-size: 15pt;
            color: #C68C3E;
        }

        .confirmacion-card {
            background-color: #fff;
            border: 1px solid #C68C3E;
            border-radius: 20px;
            padding: 10px;
            text-align: center;
            width: 615px;
            height: 206px;
        }

        .confirmacion-card img.icon {
            width: 67px;
            height: 67px;
            margin-bottom: 5px;
        }

        .confirmacion-card h2 {
            font-size: 23pt;
            margin-bottom: 10px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: #7E2C2C;
            line-height: 1;

        }

        .confirmacion-card p {
            font-size: 20pt;
            color: #7E2C2C;
            margin: 1px;
            font-family: Gabriola;
            line-height: 1;

        }

        .confirmacion-reminder-card {
            background-color: #fff;
            border: 1px solid #C68C3E;
            border-radius: 20px;
            padding: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 561px;
            height: auto;
            padding-bottom: 10px;
            padding-top: 15px;
        }

        .confirmacion-reminder-card h2 {
            font-family: Bahnschrift, 'Segoe UI', Arial, sans-serif;
            font-size: 16pt;
            color: #C68C3E;
            margin: 0 auto;
            /* Remover text-align: center; daqui, pois o flexbox vai controlar */
            display: flex;
            justify-content: space-between;
            /* Distribui o espaço entre os itens */
            align-items: baseline;
        }

        /* Centraliza o primeiro span (o texto "Recuerda que:") */
        .confirmacion-reminder-card h2 span:first-child {
            flex-grow: 1;
            /* Permite que este span cresça para centralizar */
            text-align: center;
            /* Centraliza o texto dentro dele */
        }

        /* O segundo span (o "5/30") já está alinhado à direita pelo space-between */
        .confirmacion-reminder-card h2 span:last-child {
            /* Não precisa de margin-left: auto; aqui com justify-content: space-between; */
            flex-shrink: 0;
            /* Impede que ele encolha */
            text-align: right;
            /* Garante que o texto esteja alinhado à direita dentro do span */
            color: #7E2C2C;
            margin-right: 25px;
        }

        .confirmacion-reminder-card p {
            font-family: 'Bradley Hand ITC', 'Bradley Hand', 'Brush S   cript MT', 'Comic Sans MS', cursive;
            font-size: 13pt;
            line-height: 1;
            color: #333;
            display: flex;
            align-items: flex-start;
            padding: 0;
            margin: 5px 0;
        }

        .confirmacion-reminder-card p::before {
            content: '•';
            color: #7E2C2C;
            /* Color vino tinto para el bullet */
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: 5px;
            margin-right: 5px;
        }


        .modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda en su lugar */
    z-index: 1000; /* Se asegura que esté al frente */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita el scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo negro con opacidad */
}

/* El contenido del modal (la caja) */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% desde arriba y centrado horizontalmente */
    padding: 25px;
    border: 1px solid #C68C3E;
    border-radius: 20px;
    width: 80%;
    max-width: 450px; /* Ancho máximo */
    text-align: center;
    position: relative;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #7E2C2C;
}

.modal-content h2 {
    font-size: 23pt;
    margin-top: 0;
}

.modal-content p {
    font-family: Gabriola, sans-serif;
    font-size: 20pt;
    line-height: 1.2;
    color: #7E2C2C;
}

/* Botones dentro del modal */
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los botones */
    margin-top: 20px;
}

.modal-btn {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    border: none;
    padding: 10px 40px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15pt;
}

.modal-btn.confirm {
    background-color: #7E2C2C; /* Color vino tinto */
}

.modal-btn.cancel {
    background-color: #6c757d; /* Un gris neutro */
}

/* Botón para cerrar (la X) */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}